<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="./js/LiteJS/Lite.js" type="text/javascript"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">首页</h1>
    <span class="mui-badge mui-badge-primary mui-pull-right" id="login_enter">登录</span>
</header>

<div class="mui-content">
    <div class="_iframe-wrapper">
        <iframe class="_frame"></iframe>
    </div>
</div>

<footer>
    <nav class="mui-bar mui-bar-tab">
        <a id="defaultTab" class="mui-tab-item mui-active" dest="home.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" dest="list.html">
            <span class="mui-icon mui-icon-list"></span>
            <span class="mui-tab-label">列表</span>
        </a>
        <a class="mui-tab-item" dest="delegate.html">
            <span class="mui-icon mui-icon-download"></span>
            <span class="mui-tab-label">离线</span>
        </a>
        <a class="mui-tab-item" dest="upload.html">
            <span class="mui-icon mui-icon-upload"></span>
            <span class="mui-tab-label">上传</span>
        </a>
    </nav>
</footer>

<script src="./js/common.js" type="text/javascript"></script>
<script type="text/javascript">
    /**
     *
     * @private
     */
    function _callback(){
        //mui初始化
        mui.ready(function () {
            // 子页面集合
            var subPages = ['home.html', 'list.html', 'delegate.html', 'upload.html', 'details.html'];
            //当前激活选项
            var activeTab = subPages[0], title = document.querySelector(".mui-title");
            // 创建iframe代替子页面
            createIframe('.mui-content', {
                url: activeTab,
                style: {
                    top: '44px',//设置距离顶部的距离
                    bottom: '50px',//设置距离底部的距离
                    scrollIndicator: 'none'
                }
            });
            mui('.mui-bar-tab').on('click', 'a', function (e) {
                // 获取目标子页的id
                var targetTab = this.getAttribute('dest');
                if (targetTab === activeTab) {
                    return;
                }
                // 更换标题
                title.textContent = this.querySelector('.mui-tab-label').textContent;
                // 子页内容切换
                if (mui.os.plus) {
                    // 显示目标webview
                    plus.webview.show(targetTab);
                    // 隐藏当前webview
                    plus.webview.hide(activeTab);
                    // 更改当前活跃的选项卡
                    activeTab = targetTab;
                } else {
                    // 创建iframe代替子页面
                    createIframe('.mui-content', {
                        url: targetTab,
                        style: {
                            top: '44px',//设置距离顶部的距离
                            bottom: '50px',//设置距离底部的距离
                            scrollIndicator: 'none'
                        }
                    });
                }
                // 记住当前标签
                activeTab = targetTab;
            });
            // login
            document.querySelector("#login_enter").addEventListener("click", function () {
                window.location.href = context_path.concat("/login.html");
            });
            //3、退出系统时，默认还是加载初始化的页面，自定义事件，模拟点击“首页选项卡”
            document.addEventListener('go_home', function () {
                var defaultTab = document.getElementById("defaultTab");
                //模拟首页点击
                mui.trigger(defaultTab, 'click');
                //切换选项卡高亮
                var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
                if (defaultTab !== current) {
                    current.classList.remove('mui-active');
                    defaultTab.classList.add('mui-active');
                }
            });
        });
    }
</script>
</body>
</html>